<template>
  <a-row>
    <a-col flex="auto">
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" style="position: relative">
          <div class="search-wrapper-btn">
            <a-button type="link" @click="show = !show">
              <span v-if="!show">展开
                <a-icon type="down" />
              </span>
              <span v-else>收起
                <a-icon type="up" />
              </span>
            </a-button>
          </div>
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
            <div class="mode_item">
              <div class="mode_item_div">
                <a-form-model-item label="数据来源">
                  <a-select v-model="pageFilter.dataSource" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in sourceArr" :key="key" :value="item.value">{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="涉诈网址">
                  <a-input v-model="pageFilter.fraudUrl" placeholder="请输入涉诈地址、域名、ip" />
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="诈骗类型">
                  <a-select v-model="pageFilter.fraudType" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="(item, key) in fraud_typeArr" :key="key" :value="item.value">{{
                      item.title
                    }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="发现时间">
                  <a-range-picker v-model="time1" allowClear style="width:100%;" format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD" @change="onTimeChange1" />
                </a-form-model-item>
              </div>
            </div>
            <div class="mode_item" v-show="show">
              <div class="mode_item_div">
                <a-form-model-item label="批次号">
                  <a-input v-model="pageFilter.batchNo" placeholder="请输入" />
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="推送来源">
                  <a-select v-model="pageFilter.pushSource" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in pushStatusArr" :key="key" :value="item.value">{{
                      item.title
                    }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="下发状态">
                  <a-select v-model="pageFilter.deliveryStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in deliveryStatusArr" :key="key" :value="item.value">{{
                      item.title
                    }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="下发时间">
                  <a-range-picker v-model="time2" allowClear style="width:100%;" format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD" @change="onTimeChange2" />
                </a-form-model-item>
              </div>
            </div>
            <div class="mode_item" v-show="show">
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="移动封堵状态">
                  <a-select v-model="pageFilter.mobileBlockingStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in fdStatusArr" :key="key" :value="item.value">{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="联通封堵状态">
                  <a-select v-model="pageFilter.unicomBlockingStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in fdStatusArr" :key="key" :value="item.value">{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="电信封堵状态">
                  <a-select v-model="pageFilter.telecomBlockingStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in fdStatusArr" :key="key" :value="item.value">{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
            </div>
            <div class="mode_item" v-show="show">
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="移动解封状态">
                  <a-select v-model="pageFilter.mobileUnsealStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in jfStatusArr" :key="key" :value="item.value">{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="联通解封状态">
                  <a-select v-model="pageFilter.unicomUnsealStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in jfStatusArr" :key="key" :value="item.value">{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="电信解封状态">
                  <a-select v-model="pageFilter.telecomUnsealStatus" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option v-for="(item, key) in jfStatusArr" :key="key" :value="item.value">{{ item.title }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
            </div>
          </a-form-model>
          <div class="btnBox">
            <a-button type="primary" @click="onQuery"> 查询 </a-button>
            <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
          </div>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button type="primary" @click="onSend">分发</a-button>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading" :columns="columns"
            :dataSource="pageData" @change="onTableChange" @selectedRow="onSelectedRow">
            <template slot="addressType" slot-scope="text">
              <span v-if="text == 1">网址</span>
              <span v-if="text == 2">域名</span>
              <span v-if="text == 3">ip</span>
            </template>
            <template slot="isWhitelist" slot-scope="text">
              <span v-if="text == '1'">是</span>
              <span v-if="text == '0'">否</span>
            </template>
            <template slot="fraudType" slot-scope="text">
              <span>{{ setTittle(text) }}</span>
            </template>
            <template slot="dataSource" slot-scope="text">
              <span v-if="text == 1">互联网挖掘</span>
              <span v-if="text == 2">人工智能挖掘</span>
              <span v-if="text == 3">涉诈网址上报</span>
            </template>
            <template slot="deliveryStatus" slot-scope="text">
              <span v-if="text == 0">未下发</span>
              <span v-if="text == 1">下发成功</span>
              <span v-if="text == 2">下发失败</span>
            </template>
            <template slot="pushSource" slot-scope="text">
              <span v-if="text == 0">封堵推送</span>
              <span v-if="text == 1">解封推送</span>
            </template>
            <template slot="mobileBlockingStatus" slot-scope="text,recod">
              <span v-if="text == 0">未下发</span>
              <span v-if="text == 1">待封堵</span>
              <span v-if="text == 2">封堵成功</span>
              <span v-if="text == 3">封堵失败</span>
              <p>{{ recod.mobileBlockingTime }}</p>
            </template>
            <template slot="unicomBlockingStatus" slot-scope="text,recod">
              <span v-if="text == 0">未下发</span>
              <span v-if="text == 1">待封堵</span>
              <span v-if="text == 2">封堵成功</span>
              <span v-if="text == 3">封堵失败</span>
              <p>{{ recod.unicomBlockingTime }}</p>
            </template>
            <template slot="telecomBlockingStatus" slot-scope="text,recod">
              <span v-if="text == 0">未下发</span>
              <span v-if="text == 1">待封堵</span>
              <span v-if="text == 2">封堵成功</span>
              <span v-if="text == 3">封堵失败</span>
              <p>{{ recod.telecomBlockingTime }}</p>
            </template>
            <template slot="mobileUnsealStatus" slot-scope="text">
              <span v-if="text == 0">未接收</span>
              <span v-if="text == 1">待解封</span>
              <span v-if="text == 2">解封成功</span>
              <span v-if="text == 3">解封失败</span>
            </template>
            <template slot="unicomUnsealStatus" slot-scope="text">
              <span v-if="text == 0">未接收</span>
              <span v-if="text == 1">待解封</span>
              <span v-if="text == 2">解封成功</span>
              <span v-if="text == 3">解封失败</span>
            </template>
            <template slot="telecomUnsealStatus" slot-scope="text">
              <span v-if="text == 0">未接收</span>
              <span v-if="text == 1">待解封</span>
              <span v-if="text == 2">解封成功</span>
              <span v-if="text == 3">解封失败</span>
            </template>
          </z-table>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import moment from 'moment'
import { getDictItemsFromCache } from '@/api/api'
// import { downLoadFileReader } from '@/utils/export-util/util'
import { reportList } from '@/api/plugging/authority/fd.js'
export default {
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      show: false,
      loading: false,
      visible: false,
      reloading: false,
      time1: [],
      time2: [],
      // typeArr: getDictItemsFromCache('personType'),
      sourceArr: [
        { title: "全部", value: 0, },
        { title: "互联网挖掘", value: 1, },
        { title: "人工智能挖掘", value: 2, },
        { title: "涉诈网址上报", value: 3, }
      ],
      pushStatusArr: [
        { title: "全部", value: '', },
        { title: "封堵推送", value: 0, },
        { title: "解封推送", value: 1, },
      ],
      deliveryStatusArr: [
        { title: "全部", value: '', },
        { title: "未下发", value: 0, },
        { title: "下发成功", value: 1, },
        { title: "下发失败", value: 2, }
      ],
      fdStatusArr: [
        { title: "全部", value: '', },
        { title: "未下发", value: 0, },
        { title: "待封堵", value: 1, },
        { title: "封堵成功", value: 2, },
        { title: "封堵失败", value: 3, }
      ],
      jfStatusArr: [
        { title: "全部", value: '', },
        { title: "未接收", value: 0, },
        { title: "待解封", value: 1, },
        { title: "解封成功", value: 2, },
        { title: "解封失败", value: 3, }
      ],
      fraud_typeArr: getDictItemsFromCache('case_fraud_type'),
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '涉诈网址',
          dataIndex: 'fraudUrl',
          width: 160,
          align: 'center',
          customRender: (text, record) => {
            return (
              <j-ellipsis value={text} length={12} />
            )
          }
        },
        {
          title: '地址类型',
          dataIndex: 'addressType',
          width: 90,
          // align: 'center',
          scopedSlots: { customRender: 'addressType' },
        },
        {
          title: '是否白名单',
          align: 'center',
          width: 80,
          dataIndex: 'isWhitelist',
          scopedSlots: { customRender: 'isWhitelist' },
        },
        {
          title: '诈骗类型',
          dataIndex: 'fraudType',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'fraudType' },
        },
        {
          title: '数据来源',
          dataIndex: 'dataSource',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'dataSource' },
        },
        {
          title: '发现时间',
          dataIndex: 'discoveryTime',
          width: 120,
          align: 'center',
          // scopedSlots: { customRender: 'lastRvTime' },
        },
        {
          title: '接收时间',
          dataIndex: 'receivedTime',
          width: 120,
          align: 'center',
          // scopedSlots: { customRender: 'lastRvTime' },
        },
        {
          title: '下发状态',
          dataIndex: 'deliveryStatus',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'deliveryStatus' },
        },
        {
          title: '下发时间',
          dataIndex: 'deliveryTime',
          width: 120,
          align: 'center',
        },
        {
          title: '推送来源',
          dataIndex: 'pushSource',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'pushSource' },
        },
        {
          title: '移动封堵状态',
          dataIndex: 'mobileBlockingStatus',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'mobileBlockingStatus' },
        },
        {
          title: '联通封堵状态',
          dataIndex: 'unicomBlockingStatus',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'unicomBlockingStatus' },
        },
        {
          title: '电信封堵状态',
          dataIndex: 'telecomBlockingStatus',
          align: 'center',
          width: 120,
          scopedSlots: { customRender: 'telecomBlockingStatus' },
        },
        {
          title: '移动解封状态',
          dataIndex: 'mobileUnsealStatus',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'mobileUnsealStatus' },
        },
        {
          title: '联通解封状态',
          dataIndex: 'unicomUnsealStatus',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'unicomUnsealStatus' },
        },
        {
          title: '电信解封状态',
          dataIndex: 'telecomUnsealStatus',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'telecomUnsealStatus' },
        },
        {
          title: '批次号',
          dataIndex: 'batchNo',
          width: 120,
          align: 'center',
          // scopedSlots: { customRender: 'lastRvTime' },
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      batchNoList: [],
      rangTime: [],
      departmentId: ""
    }
  },
  created() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.time1 = []
      this.time2 = []
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      reportList(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.pageData = {}
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onSelectedRow(row) {
      // console.log(row)
      this.batchNoList = []
      this.rangTime = []
      // this.distributeNum = 0
      let discoveryTime = []
      if (row.length > 0) {
        row.forEach(item => {
          this.batchNoList.push(item.batchNo)
          // this.distributeNum += item.distributeNum
          // console.log(item.discoveryTime)
          discoveryTime.push(new Date(item.discoveryTime))
        });
      }
      var maxDate = new Date(Math.max.apply(null, discoveryTime)); //最大日期
      var minDate = new Date(Math.min.apply(null, discoveryTime)); //最小日期
      this.rangTime = [moment(minDate).format('YYYY-MM-DD'), moment(maxDate).format('YYYY-MM-DD')]
      // console.log(this.rangTime)
    },
    onTimeChange1(date) {
      this.$set(this.pageFilter, 'startDiscoveryTime', date[0])
      this.$set(this.pageFilter, 'endDiscoveryTime', date[1])
    },
    onTimeChange2(date) {
      this.$set(this.pageFilter, 'startDeliveryTime', date[0])
      this.$set(this.pageFilter, 'endDeliveryTime', date[1])
    },
    setTittle(text) {
      return this.$filterDictTextByCache('case_fraud_type', text)  //现在字典中对应的文字，是全局函数
    },
    onSend() {
      if (this.batchNoList.length <= 0) {
        this.$message.warn("请勾选列表数据！")
        return
      }
      // if (this.distributeNum > 300000) {
      //   this.$message.warning('分发数量不能超过三十万条！')
      //   return
      // }
      this.$router.push({
        path: "/authority/fd_distribution/add",
        query: {
          flag: 1,
          batchNoList: this.batchNoList,
          rangTime: this.rangTime
        }
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;

  .mode_item_div {
    width: 23%;
    padding: 5px 0;

    .ant-form-item {
      margin-bottom: 0;
    }
  }

  &>* {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}

.mode_item_flex {

  // width: 50% !important;
  /deep/ .ant-form-item-label {
    width: 33% !important;
  }

  /deep/ .ant-form-item-control-wrapper {
    width: 63% !important;
  }
}

.search-wrapper-btn {
  position: absolute;
  right: 0%;
  top: 9px;
  z-index: 100;
}

.btnBox {
  margin-top: 10px;
  // position: absolute;
  // right: 0;
  // top: 5px;
  // z-index: 120;
}

@import '~@assets/less/common.less';
</style>
